<template>
  <div id="add">
    <div class="add">
      <el-form :rules="rules" :model="form">
        <el-form-item prop="itemName">
          <el-input v-model="form.itemName" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item prop="itemDate">
          <el-date-picker v-model="form.itemDate" type="date" placeholder="请选择项目完成日期" />
        </el-form-item>
        <!-- 上传 -->
        <el-form-item>
          <el-upload v-model:file-list="fileList" action="#" list-type="picture-card" :auto-upload="false"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <!-- 上传浏览 -->
          <el-dialog v-model="dialogVisible">
            <img class="pImg" :src="dialogImageUrl" alt="预览图片" />
          </el-dialog>
        </el-form-item>
        <!-- 介绍 -->
        <el-form-item>
          <el-input v-model="form.itemCon" type="textarea" placeholder="请输入项目内容" :rows="3" resize="none" />
        </el-form-item>
      </el-form>

      <div class="btn">
        <el-button type="primary">修改项目</el-button>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
//后端请求了
import { project } from "@/api";
import type { FormRules, UploadProps, UploadUserFile } from "element-plus";
//全局变量
const internalInstance = getCurrentInstance();
let global = internalInstance.appContext.config.globalProperties;
const form = ref({});
const rules = reactive<FormRules>({
  itemName: [
    { required: true, message: "请输入项目名称", trigger: "blur" },
    { max: 50, message: "不要超过50", trigger: "blur" },
  ],
  itemDate: [{ required: true, message: "请选择完成日期", trigger: "blur" }],

});
//默认加载图片
const fileList = ref<UploadUserFile[]>([
  {
    name: "蔡徐坤",
    url: "https://p1.itc.cn/q_70/images03/20220810/b2202f34abcb49bd9dcf7b62229c5dc2.gif",
  },
  {
    name: "蔡徐坤",
    url: "https://p4.itc.cn/q_70/images03/20220810/8ada6be35e134e5fa8aad1853878f660.gif",
  },
]);
//父级调用子集,进行得到值
const data = (id) => {
  console.log(global.$httpUrl);
  project.getOne(id).then((res) => {
    form.value = res; //传数据虚假null错
    form.value.itemCon = res.itemFirst + res.itemSecond;
    console.log(res);
    fileList.value[0].url = global.$httpUrl + form.value.itemImg1;
    fileList.value[1].url = global.$httpUrl + form.value.itemImg2;
  });
};
const dialogImageUrl = ref("");
//显示预览上传的图片
const dialogVisible = ref(false);
//删除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
//浏览图片
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//父组件调用必须抛出去
defineExpose({
  data,
});
</script>
  
<style lang="less" scoped>
#add {
  width: 100%;
  height: 100%;

  .add {
    :deep(.el-input__wrapper) {
      --el-input-focus-border-color: aqua;
      background-color: rgb(27, 44, 92);

      .el-input__inner {
        color: white;

        &::-webkit-input-placeholder {
          /* WebKit browsers*/
          color: rgba(aqua, 0.5);
        }
      }
    }

    :deep(.el-textarea) {
      // 一下为正常
      background-color: transparent;

      .el-textarea__inner {
        overflow: hidden;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 2px;
          height: 100%;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 2px;
          background: orange;
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          border-radius: 2px;
          background: rgba(blue, 0.2);
        }

        background-color: rgb(27, 44, 92);
        --el-input-focus-border-color: aqua;
        color: white;

        &::-webkit-input-placeholder {
          /* WebKit browsers*/
          color: rgba(aqua, 0.5);
        }
      }
    }

    :deep(.el-dialog) {
      width: 30%;
      --el-dialog-bg-color: rgba(255, 119, 0, 0.1);
      border-image-source: radial-gradient(65% 65%,
          transparent 0px,
          transparent 100%,
          orange 100%);

      .el-dialog__title {
        color: orange;
      }

      .el-dialog__close {
        color: orange;
      }
    }

    .pImg {
      width: 100%;
    }

    .btn {
      margin-top: 5%;
      margin-left: 75%;

      :deep(.el-button--primary) {
        margin-bottom: 5%;
        --el-button-bg-color: none;
        --el-button-border-color: rgba(aqua, 0.8);
        --el-button-hover-text-color: black;
        --el-button-hover-bg-color: rgba(aqua, 0.8);
        --el-button-hover-border-color: rgba(aqua, 0.8);
      }
    }
  }
}
</style>
  